iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
自我挑戰組

與Vue相遇系列 第 14

Day014-Component組件

  • 分享至 

  • xImage
  •  

Vue:隨著你使用vue的狀況,你更應該要了解元件模組化的概念。vue不但在資料上面有所規劃,他在元件模組化也有所強大,讓你可以輕鬆地管理好你的元件。在進行案例前,我們首先知道一下,什麼是全域註冊及局部註冊?

  • 全域註冊:
    通常,如果需要共用元件,我們會使用全域註冊。在全域註冊中,我們會使用Vue.component()的語法,並且會使用兩個參數,分別是組件名稱及元件內容,元件內容我們利用物件包住,如下:
<script>
    Vue.component("global", {
        template: `<div>{{data}}</div>`,
        data() {
            return {
              data: '哈囉Edward,我是全域註冊,很高興你能夠了解全域註冊'
            }
        }
    });
    let vm = new Vue({
        el: "#app"
    });
</script>

此次的組件名稱,我們命名為global,並且我們在其中給予了data資料。這個資料也是專門給予這個組件。完成後,我們只需要在template為#app下,放置這個組件:

<body>
    <div id="app">
        <global></global>
    </div>
</body>
  • 局部註冊
    一般來說,我們大多會使用局部註冊。在判斷是否要用全域或局部時,只需判斷是否網頁載入時,都需要用到!如果不需要,則利用局部註冊,可以達到同等效果,在網頁運行上,也不會耗費太多不需要的組件上:
<script>
    let vm = new Vue({
        el: "#app",
        components: {
            'part': {
                template: `<div>{{data}}</div>`,
                data() {
                    return {
                    data: '哈囉Edward,我是局部註冊,很高興你能夠了解局部註冊'
                    }
                }
            }
        }
    });
</script>

Vue:看是不是很簡單,只需增加component屬性,即可使用。如果沒有問題,之後就開始帶實際例子,並且讓你了解組件之間的傳遞訊息吧~

待續......


上一篇
Day013-Lifecycle-Vue實體生命週期-創建你的夢中情人
下一篇
Day015-Component組件-基本帳務系統實例
系列文
與Vue相遇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言